import { useState } from 'react'
import { Layout, Button, Space } from 'antd'
import {
  ToolOutlined,
  SettingOutlined,
  UserOutlined,
  HomeOutlined,
  BellOutlined,
  AppstoreOutlined,
  MenuOutlined
} from '@ant-design/icons'
import { Resizable } from 're-resizable'
import RightSlider from './components/RightSlider'
import  TabView from './components/CentralView/TabView'
// import TabViewExample from './components/CentralView/TabExample'
import OPCUAClientPanel from './components/Opcua'
import CommandLibPanel from './components/CommandLibPanel/CommandLibPanel'
import OPCUAStatusBar from './components/OPUCAStatusBar'
// import TitleBar from './components/TitleBar'
import LogController from './components/LogController/LogController'

const { Header, Footer, Content } = Layout



const App = (): JSX.Element => {
  const [leftWidth, setLeftWidth] = useState(200)
  const [rightWidth, setRightWidth] = useState(200)

  const [drawerVisible, setDrawerVisible] = useState(false);

  return (
    <Layout style={{ height: '100vh' }}>
      {/* <TitleBar /> */}
      <Header
        style={{
          height: 24,
          background: '#d5f5f5',
          display: 'flex',
          alignItems: 'center',
          padding: '0 10px'
        }}
      >
        <Space>
          <Button
            type="text"
            title="Settings"
            icon={<ToolOutlined />}
            onClick={() =>
              window.electron.ipcRenderer.send('open-new-tab', 'https://ant-design.antgroup.com/')
            }
          />
          <Button type="text" title="Configuration" icon={<SettingOutlined />} />
          <Button type="text" title="Administrator" icon={<UserOutlined />} />
        </Space>
        <Space style={{ marginLeft: 'auto' }}>
          <Button type="text" title="Back to Home Page" icon={<HomeOutlined />} />
          <Button type="text" title="Notification" icon={<BellOutlined />} />
          <Button type="text" title="Option List"  icon={<AppstoreOutlined />} />
          <Button
            type="text"
            title="Command box"
            icon={<MenuOutlined />}
            onClick={() => setDrawerVisible(true)}
          />
        </Space>
      </Header>
      <Layout style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
        <Resizable
          defaultSize={{ width: leftWidth, height: '100%' }}
          minWidth={100}
          maxWidth={400}
          enable={{ right: true }}
          onResizeStop={(e, direction, ref, d) => setLeftWidth(leftWidth + d.width)}
          style={{ background: '#d3d3d3' }}
        >
          <div
            style={{
              height: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <OPCUAClientPanel />
          </div>
        </Resizable>
        <Content style={{ flexGrow: 1, display: 'flex', flexDirection: 'column', height: '100%' }}>
            <LogController />
            <TabView />
            {/* <TabViewExample /> */}
        </Content>
        <Resizable
          defaultSize={{ width: rightWidth, height: '100%' }}
          minWidth={100}
          maxWidth={400}
          enable={{ left: true }}
          onResizeStop={(e, direction, ref, d) => setRightWidth(rightWidth + d.width)}
          style={{ background: '#a9a9a9' }}
        >
          <div
            style={{
              height: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <CommandLibPanel />
          </div>
        </Resizable>
      </Layout>
      <Footer style={{ background: '#808080', textAlign: 'center', padding: '10px' }}>
        <OPCUAStatusBar  />
      </Footer>
      <RightSlider drawerVisible={drawerVisible} setDrawerVisible={setDrawerVisible} />
    </Layout>
  )
}

export default App
